<template>
  <div>
      <h1 v-for="item in cartList">
        {{item}}
      </h1>
      <h1>{{cartNums}}</h1>
      <h1>没持久化的模块：{{userInfo.name}}</h1>
      <button @click="addNum">加2</button>
      <button @click="addItem">加入一项</button>
      <button @click="changeUser">改变名字</button>
  </div>
</template>


<script setup >
  import {computed} from 'vue'
  // 使用pinia的state,getters数据和actions方法
  import {cartStore, userStore} from '@/pstore/cart.js'
  
  let cstore=cartStore(); //获取模块的pinia实例
  console.log(cstore,"---------")
let userS=userStore();
let userInfo=computed(()=>userS.userInfo);
  // 解构出来 cstore 中state
  let {cartList}=cstore; //获取state中的数据

  // pina 中的getters  放到本组件计算属性使用

  let cartNums=computed(()=>cstore.cartNums);
//  调用pinia的actions方法
  let addNum=()=>{
    cstore.addCart(2)
  }
 let addItem=()=>{
    cstore.changeCart("小米15pro")
 }
//  改变名字
 let changeUser=()=>{
      userS.changeUserInfo({
        name:"李思",
        age:18
      })
 }
</script>